<template>
	<view>
		<view class="page-body">
			<view class="page-section page-section-gap">
				<map style="width: 100%; height: 100vh;" :latitude="latitude" :longitude="longitude" :markers="covers"
					@click="onMapClick">
					<!-- 可选的，加入覆盖视图 -->
					<!-- <cover-view v-if="showInfoWindow" :style="infoWindowStyle">
						<view class="info-window">
							<text>测试</text>
							<button @click="closeInfoWindow">关闭</button>
						</view>
					</cover-view> -->
				</map>
			</view>
		</view>


	</view>
</template>

<script>
export default {
	data() {
		return {
			showInfoWindow: false,
			id: 0, // 使用 marker点击事件 需要填写id
			title: 'map',
			latitude: 37.887795,
			longitude: 102.644908,
			covers: [{
				latitude: 37.887795,
				longitude: 102.644908,
			}],
			infoWindowStyle: {
				position: 'absolute',
				top: '50%',
				left: '50%',
				transform: 'translate(-50%, -50%)',
				backgroundColor: 'white',
				padding: '10px',
				borderRadius: '5px',
				boxShadow: '0px 0px 5px rgba(0,0,0,0.3)',
			}
		}
	},
	methods: {
		onMapClick(e) {
			console.log('地图被点击', e);
			// 你可以在这里处理点击事件
			this.showInfoWindow = true
			this.navigateTo()
		},
		closeInfoWindow() {
			this.showInfoWindow = false;
		},
		navigateTo() {
      // 进行导航
      wx.openLocation({
        latitude: 37.887795, // 腾讯总部的纬度
        longitude: 102.644908, // 腾讯总部的经度
        name: '鼎驰驾校',
        address: '甘肃省武威市凉州区丹阳路57号',
        scale: 18,
        success: function() {
          console.log('Navigation successful');
        },
        fail: function(err) {
          console.error('Navigation failed', err);
        }
      });
    }
	}
}
</script>